<template>
  <div>
    <!-- <div style="height: 120px"></div> -->
    <!-- <el-row class="foot-item avue-affix"
            :style="{width: isCollapse? 'calc(100% - 80px)': 'calc(100% - 260px)' }"
            id="avue-view"> -->
    <el-row
      class="foot-item avue-affix"
      :class="customClass"
      style="width: 90%"
      id="avue-view"
    >
      <template v-if="process.status == 'todo'">
        <el-button
          v-if="process.taskDefinitionKey == 'Activity_0b2pxi3'"
          type="primary"
          size="medium"
          v-loading="loading"
          @click="$emit('examine', true)"
        >
          <!-- <span v-if="['recall', 'reject'].includes(process.processIsFinished)">重新提交</span> -->
          <span>同 意</span>
        </el-button>
        <el-button
          v-if="process.taskDefinitionKey == 'Activity_0b2pxi3'"
          size="medium"
          v-loading="loading"
          @click="$emit('examine', false)"
        >
          <span>驳 回</span>
          <!-- <span v-else>取消申请</span> -->
        </el-button>
        <el-button
          v-if="process.taskDefinitionKey == 'Activity_0nuxcew'"
          type="primary"
          size="medium"
          v-loading="loading"
          @click="$emit('agree')"
        >
          <span>提 交</span>
        </el-button>
        <el-button
          v-if="process.taskDefinitionKey == 'Activity_0ju21e6'"
          type="primary"
          size="medium"
          v-loading="loading"
          @click="$emit('subDeliver')"
          >提交并分发</el-button
        >
        <!-- <el-button v-if="buttonList.find(b => b.buttonKey == 'wf_transfer')"
                   type="primary"
                   size="medium"
                   v-loading="loading"
                   @click="$emit('user-select', {type: 'transfer', checkType: 'radio'})">转办</el-button>
        <el-button v-if="buttonList.find(b => b.buttonKey == 'wf_delegate')"
                   type="warning"
                   size="medium"
                   v-loading="loading"
                   @click="$emit('user-select', {type: 'delegate', checkType: 'radio'})">委托</el-button>
        <el-button v-if="buttonList.find(b => b.buttonKey == 'wf_rollback')"
                   type="success"
                   size="medium"
                   v-loading="loading"
                   @click="handleRollback">指定回退</el-button>
        <el-button v-if="buttonList.find(b => b.buttonKey == 'wf_terminate')"
                   type="danger"
                   size="medium"
                   v-loading="loading"
                   @click="$emit('terminate')">终止</el-button>
        <el-button v-if="process.isMultiInstance && buttonList.find(b => b.buttonKey == 'wf_add_instance')"
                   type="primary"
                   size="medium"
                   v-loading="loading"
                   @click="$emit('user-select', {type: 'addInstance', checkType: 'checkbox'})">加签</el-button> -->
      </template>
      <!-- <el-button v-if="process.isOwner && process.isReturnable && !['recall', 'reject'].includes(process.processIsFinished)"
                 type="warning"
                 size="medium"
                 v-loading="loading"
                 @click="$emit('withdraw')">撤销</el-button>
      <el-button v-if="buttonList.find(b => b.buttonKey == 'wf_print')"
                 type="info"
                 size="medium"
                 v-loading="loading"
                 @click="$emit('print')">打印</el-button> -->
    </el-row>
    <el-dialog
      :visible.sync="nodeVisible"
      append-to-body
      :close-on-click-modal="false"
      title="选择回退节点"
    >
      <avue-form
        v-if="nodeVisible"
        v-model="nodeForm"
        :option="nodeOption"
        @submit="handleNodeSubmit"
      ></avue-form>
    </el-dialog>
  </div>
</template>

<script>
import { backNodes } from "@/api/plugin/workflow/process";

import { mapGetters } from "vuex";

export default {
  name: "wf-button",
  computed: {
    ...mapGetters(["isCollapse", "permission"]),
  },
  props: {
    loading: {
      type: Boolean,
      default: false,
    },
    buttonList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    process: Object,
    comment: String,
    customClass: {
      type: String,
      default: () => {
        return "";
      },
    },
  },
  data() {
    return {
      bacBoolean: true,
      nodeVisible: false,
      nodeForm: {},
      nodeOption: {
        column: [
          {
            label: "节点",
            prop: "nodeId",
            type: "select",
            props: {
              label: "nodeName",
              value: "nodeId",
            },
            span: 24,
            rules: [
              { required: true, message: "请选择回退节点", trigger: "change" },
            ],
          },
        ],
      },
      backNodes: [],
    };
  },
  watch: {
    "process.taskId": {
      handler(val) {
        if (val) {
          backNodes({ taskId: val }).then((res) => {
            const list = res.data;
            this.backNodes = list;
            this.findObject(this.nodeOption.column, "nodeId").dicData = list;
          });
        }
      },
      immediate: true,
    },
  },
  methods: {
    handleRollback() {
      // 指定回退
      if (!this.comment) {
        this.$message.error("请填写批复意见");
        return;
      }
      this.nodeVisible = true;
    },
    handleNodeSubmit() {
      // 指定回退确定
      const { nodeId } = this.nodeForm;
      this.$emit("rollback", nodeId);
    },
  },
};
</script>

<style lang="scss" scoped>
.foot-item {
  position: fixed;
  bottom: 0;
  margin-left: -20px;
  // right: 0;
  z-index: 101;
  height: 66px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  // -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.custom-bottom-btn {
  background: #f9f9f9;
}
</style>
